<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>点菜宝</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    
    <!-- 顶部 -->
    <ul class="clearfix" id="header-nav">
        <li ><a href="zdy.html">自定义菜</a></li>
        <li class="active"><a >拼音检索</a></li>
    </ul>


    <div class="pycs">
        <div class="pycs-top">
            <input type="text" name="diet-mingzi" class="diet-mingzi" placeholder="输入菜名、菜品编号查询" >
        </div>
        <div class="pycs-center clearfix">
            <!-- 有打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name has-discount" >
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">8 折</div >
                </div>
            </div>

            <!-- 有打折无做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#2">
                <div class="diet-list-name has-discount">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">7 折</div >
                </div>
            </div>
            
            <!-- 无打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 无打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 有打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name has-discount" >
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">8 折</div >
                </div>
            </div>

            <!-- 有打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name has-discount">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">7 折</div >
                </div>
            </div>
            
            <!-- 无打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 无打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 有打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name has-discount" >
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">8 折</div >
                </div>
            </div>

            <!-- 有打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name has-discount">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">7 折</div >
                </div>
            </div>
            
            <!-- 无打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 无打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 有打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name has-discount" >
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">8 折</div >
                </div>
            </div>

            <!-- 有打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name has-discount">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">7 折</div >
                </div>
            </div>
            
            <!-- 无打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 无打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 有打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name has-discount" >
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">8 折</div >
                </div>
            </div>

            <!-- 有打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name has-discount">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                    <div class="discount">7 折</div >
                </div>
            </div>
            
            <!-- 无打折有做法 -->
            <div class="diet-list" data-toggle="modal" data-target="#1">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>

            <!-- 无打折无做法 -->
            <div class="diet-list">
                <div class="diet-list-name">
                    <div class="ellipsis">干煸豆角</div>
                    <div class="diet-list-price">¥20.01 </div>
                </div>
            </div>
        </div>
        <div class="pycs-bottom clearfix">
            <div class="left"><a id="goback"><img src="images/fanhui.png" alt=""></a></div>
            <div class="right">
                <a href="detail.html">
                    <img src="images/gouwuche.png" alt="">
                    <span class="gw-num">12</span>
                </a>
            </div>
        </div>
        <!-- 添加到购物车的提示信息 -->
        <div id="tip" style="display:none">
            已成功添加到购物车
        </div>
    </div>

    
    <!-- 有做法弹出框 -->
    <div class="modal fade tanchukuang" id="1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-content">
            <h4>剁椒凤爪做法  </h4>

            <div class="select-zf clearfix">
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" checked="checked" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2"  ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2"  ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
                <div class="zuocai clearfix">
                    <div class="left ">
                        <input type="radio" name="radio2" ><label for="radio1"></label>
                    </div>
                    <div class="right">清蒸</div>
                </div>
            </div>

            <div class="beiz">
                <div class="form-group clearfix">
                    <label for="">数量：</label>
                    <input type="number" placeholder="份数" class="form-control">
                </div>
                <div class="form-group clearfix">
                    <label for="">备注：</label>
                    <input type="text" placeholder="留言" class="form-control">
                </div>
            </div>

            <div class="qz">
                <input type="submit" value="取消" data-dismiss="modal" class="giveup">
                <input type="submit" value="确认" data-dismiss="modal" id="queren">
            </div>
        </div>
    </div>

    <!-- 没做法弹出框 -->
    <div class="modal fade tanchukuang mzc-tanchukuang" id="2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-content">
            <h4>剁椒凤爪做法  </h4>

            <div class="beiz">
                <div class="form-group clearfix">
                    <label for="">数量：</label>
                    <input type="number" placeholder="份数" class="form-control">
                </div>
                <div class="form-group clearfix">
                    <label for="">备注：</label>
                    <input type="text" placeholder="留言" class="form-control">
                </div>
            </div>

            <div class="qz">
                <input type="submit" value="取消" data-dismiss="modal" class="giveup">
                <input type="submit" value="确认" data-dismiss="modal" id="queren">
            </div>
        </div>
    </div>
 
    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 全部删除 js-->
    <script src="js/delete.js"></script>
    <script>
        $(document).ready(function(){
            $('#goback').click(function(){
                $.confirm({
                    'message'   : '确认返回？',
                    'buttons'   : {
                        '确定'   : {
                            'class' : 'blue',
                            'action': function(){
                                
                            }
                        },
                        '取消'    : {
                            'action': function(){}  
                        }
                    }
                });
            });
        });
    </script>
    <script type="text/javascript">
        $('#queren').click (function (){   
            document.getElementById("tip").style.display="block";
            $ ('#tip').show ().delay (1000).fadeOut ();
        });
    </script>
</body>
</html>